import React from 'react'
import { useEffect, useState } from 'react'
import zicss from "../css/zixun.module.css"
import { Link } from 'react-router-dom'

const Zixun = (props) => {
    // console.log(props.zixundata,8888888888);
    const [data, setdata] = useState([])

    useEffect(() => {
        setdata(props.zixundata);
        // console.log(data, 99999999999);
    }, [data]);

    return <div>
        {data.map((item) => {
            if (item.touxiang != null) {
                return (
                    <div className={zicss.box} key={item.infoid}>
                        {/* 盒子左边 */}
                        <Link key={item.infoid} to={{ pathname: "/info/" + item.infoid }}>
                            <div className={zicss.boxImg}>
                                <img src={item.infoimg} alt="" />
                            </div>
                        </Link>
                        {/* 盒子右边 */}
                        <div className={zicss.boxRight}>
                            <Link key={item.infoid} to={{ pathname: "/info/" + item.infoid }}>
                                <h3>{item.title}</h3>
                                <p>{item.content}</p>
                            </Link>
                            <div className={zicss.person}>
                                <div className={zicss.personBottom}>
                                    <div className={zicss.author_and_date}>
                                        <div className={zicss.author}>
                                            <img src={item.touxiang} alt="" />
                                            <span>{item.author}</span>
                                        </div>
                                        <div className={zicss.date}>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                                <g fill="none" fillRule="evenodd">
                                                    <circle cx="8" cy="8" r="7" stroke="#98ADA2" strokeWidth="2" />
                                                    <path fill="#98ADA2" d="M9 8h2v2H7V5h2v3z" />
                                                </g>
                                            </svg>
                                            <span>{item.time}</span>
                                        </div>
                                    </div>
                                    <div className={zicss.like_comment_share}>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                            <path fill="none" fillRule="evenodd" stroke="#0FBC5F" strokeWidth="2" d="M1 1v12.82l3.67-2.717H15V1H1z" />
                                        </svg>
                                        <span className={zicss.pinglunCount}>1</span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                            <g fill="none" fillRule="evenodd">
                                                <rect width="5" height="7" x="1" y="8" stroke="#0FBC5F" strokeWidth="2" rx="1" />
                                                <path stroke="#0FBC5F" strokeWidth="2" d="M6 6v7h7.49l1.267-7H6z" />
                                                <path fill="#0FBC5F" d="M9 1c.667.667.667 2 0 4H5c1.074-1.126 1.74-1.926 2-2.402C7.213 2.208 7 1 7 1c.004-1.105 1-1 2 0z" />
                                            </g>
                                        </svg>
                                        <span className={zicss.dianzanCount}>{item.dianzan}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )
            }
        })}
        {/* 隐藏加载更多 */}
        {/* {len % 10 == 0 && len != 0 ? <div className={zicss.loadmore} onClick={() => loadmore()}>加载更多</div> : ""} */}
    </div>
}

export default Zixun